<template>
  <div class="register_body">
    <div class="register_email">
      邮箱：
      <input v-model="data.email" class="register_text" type="text" />
      <button @touchstart="handleToVerify" :disabled="disabed">{{verifyInfo }}</button>
    </div>
    <div>
      用户名：
      <input v-model="data.username" class="register_text" type="text" />
    </div>
    <div>
      密码：
      <input v-model="data.password" class="register_text" type="password" />
    </div>
    <div>
      确认密码：
      <input class="register_text" type="password" />
    </div>
    <div>
      验证码：
      <input v-model="data.verify" class="register_text" type="text" />
    </div>
    <div class="register_btn">
      <button @touchstart="handleToRegister">注册</button>
    </div>
    <div class="register_link">
      <router-link to="/mine/login">立即登录</router-link>
      <router-link to="/mine/findPassword">找回密码</router-link>
    </div>
  </div>
</template>

<script>
import { getverify, postreaguster } from "network/login/reaguster";
import { messageBox } from "components/JS";
export default {
  data() {
    return {
      //用户输入的数据
      data: {
        email: "",
        username: "",
        password: "",
        verify: "",
      },
      verifyInfo: "发送验证码",
      disabled: false,
    };
  },
  methods: {
    // 发送验证码请求  验证码还可以添加60s倒计时
    handleToVerify() {
      // 通过if判断 如果被true 就不给调用了后面就不执行了 disabled为true时候 点击事件还是可以执行的
      if (this.disabled) {
        return;
      }
      var email = this.data.email;
      //发到验证码需要的参数之后就发送请求 这里就不封装了直接调用
      getverify(email).then((res) => {
        var status = 0;
        var than = this; //保存this指向
        if (status === 0) {
          than.countDown();
          // messageBox({
          //   title: "验证码",
          //   content: "验证码已发送",
          //   ok: "确定",
          //   //发送成功后进行调用倒计时
          //   handleOk() {
          //     // than.countDown();
          //   },
          // });
        } else {
          messageBox({
            title: "验证码",
            content: "验证码失败",
            ok: "确定",
          });
        }
      });
    },
    //注册请求
    handleToRegister() {
      var data = this.data;
      postreaguster(data).then((res) => {
        var status = res.status;
        var This = this;
        if (status === 0) {
          messageBox({
            title: "注册",
            content: "用户注册成功",
            ok: "确定",
            handleOk() {
              This.$router.push("/mine/login");
            },
          });
        } else {
          messageBox({
            title: "注册",
            // 拼接上返回错误信息
            content: res.msg + ",注册失败",
            ok: "确定",
          });
        }
      });
    },

    //短信时效性能和倒计时
    countDown() {
      //开启禁用按钮 计时器已经启动
      this.disabled = true;

      var count = 60;
      // 不停地调用函数
      var timer = setInterval(() => {
        //开始定时器要做什么事
        count--; //递减
        this.verifyInfo = "剩余" + count + "秒";
        if (count === 0) {
          //关闭禁用按钮
          this.disabled = false;
          // 初始化
           count = 60;
          // 修改内容
          this.verifyInfo = "发送验证码";
          //关闭定时器  这个方法有点问题 但是思路是不变的 vue对原生的定时器还是有些区别的 可以打印定时器调试一下就发现了 此时的timer是个对象  要下停止 要把timer_id 指定具体对象
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
#content .register_body {
  width: 100%;
}
.register_body .register_text {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px #ccc solid;
  margin-bottom: 5px;
  outline: none;
  text-indent: 10px;
}
.register_body .register_btn {
  height: 50px;
  margin: 10px;
}
.register_body .register_email {
  position: relative;
}
.register_body .register_email button {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 30px;
  border-radius: 3px;
  border: none;
  padding: 5px;
}
.register_body .register_btn button {
  width: 100%;
  height: 100%;
  background: #e54847;
  border-radius: 3px;
  border: none;
  display: block;
  color: white;
  font-size: 20px;
}
.register_body .register_link {
  display: flex;
  justify-content: space-between;
}
.register_body .register_link a {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
}
</style>
